<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <title>考试成绩</title>
    <style>
        body {
            text-align: center;
            font-family: 微软雅黑;
        }
        
        label {
            margin-left: 20ox;
        }
        
        .report {
            width: 560px;
            margin: 30px auto;
        }
        
        .title {
            background: #f6f6f6;
            font-size: 18px;
        }
        
        .title,
        .content {
            width: 560px;
            height: 36px;
            line-height: 36px;
            border: 1px solid #ddd;
        }
        
        .title div {
            width: 80px;
            text-align: center;
            float: left;
        }
        
        .content {
            clear: both;
        }
        
        .content div {
            width: 80px;
            text-align: center;
            float: left;
        }
    </style>
</head>

<body>
    <div id="ex">
        <h2>成绩表</h2>
        <label>姓名:</label><span>{{name}}</span>
        <label>性别:</label><span>{{gender}}</span>
        <label>年龄:</label><span>{{age}}</span>
        <div class="report">
            <div class="title">
                <div>学期</div>
                <div>数学</div>
                <div>物理</div>
                <div>化学</div>
                <div>英语</div>
                <div>计算机</div>
                <div>总分</div>
            </div>
            <div class="content" v-for="(grade,index) in grades">
                <div>{{grade.term}}</div>
                <div v-for="score in grade.scores">
                    <div>{{score}}</div>
                </div>
                <div>{{total(index)}}</div>
            </div>
        </div>
    </div>
    <script>
        var ex = new Vue({
            el: '#ex',
            data: {
                name: '张无忌',
                gender: '男',
                age: 20,
                grades: [{
                    term: '第一学期',
                    scores: {
                        math: 99,
                        physics: 85,
                        chemistry: 95,
                        english: 100,
                        computer: 100
                    }
                }, {
                    term: '第二学期',
                    scores: {
                        math: 92,
                        physics: 89,
                        chemistry: 99,
                        english: 76,
                        computer: 77
                    }
                }]
            },
            methods: {
                total: function(index) {
                    var total = 0;
                    var obj = this.grades[index].scores;
                    for (var i in obj) {
                        total += obj[i];
                    }
                    return total;
                }
            },
        })
    </script>
</body>

</html>